Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
Drip
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: Avenir, sans-serif; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #ffefc2; } .drip, .splash { stroke: #2e848c; fill: #40aeb8; } button { font-size: 1.5rem; padding: 0.5rem 2rem; border-radius: 5px; border: none; background-color: #fcca00; cursor: pointer; } button:hover { background-color: #dbb104; }
console.log("Event Fired") document.querySelector("#add-btn").addEventListener("click", drip); let d = 0; let arr = document.querySelectorAll(".drip"); let spArr = document.querySelectorAll(".splash"); gsap.set(".drip", { scale: 0 }); gsap.set(".splash", { opacity: 0 }); function splash() { gsap.killTweensOf(".splash"); let tl = new gsap.timeline(); gsap.set(".splash", { x: 0, y: 0, scale: 1, opacity: 1 }); for (var i of spArr) { tl.to( i, { x: Math.random() * 120 - 40, y: Math.random() * -50, scale: 0, duration: 1, ease: "power4.out" }, 0 ); } } function drip() { let tl = new gsap.timeline(); let i = d % 5; tl.set(arr[i], { scale: 0, y: 0 }); tl.to(arr[i], { scale: 1, duration: 0.1 }); tl.to( arr[i], { y: 200, duration: 0.7, ease: "power1.in", onComplete: () => { splash(); } }, 0 ); tl.set(arr[i], { scale: 0, y: 0 }); d++; }